<template>
  <div>
    <main>
      <!-- 搜索栏 -->
      <div class="search">
        <el-select v-model="value" placeholder="是否考过">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-input
          placeholder="请输入邮箱搜索"
          prefix-icon="el-icon-search"
          v-model="input_email"
        >
        </el-input>
        <el-input
          placeholder="请输入昵称搜索"
          prefix-icon="el-icon-search"
          v-model="input_nickname"
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="toggleSelection()"
          >重置</el-button
        >

        <el-button type="primary" id="pub_work" @click="pubWork"
          >布置作业</el-button
        >
      </div>

      <!-- 学生管理表格区域 -->
      <el-table
        v-if="!pubFlag"
        border
        stripe
        ref="multipleTable"
        :data="studentsList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="40">
        </el-table-column>
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>
        <el-table-column
          align="center"
          prop="nickname"
          label="姓名"
          width="94"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="createDate"
          label="注册时间"
          width="130"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.createDate | formatTime }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="email"
          label="邮箱"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="地区"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="testTime"
          label="考试时间"
          width="130"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="reportNum"
          label="是否考过"
          width="80"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.reportNum > 0 ? "是" : "否" }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="ifPass"
          label="状态"
          width="200"
          show-overflow-tooltip
        >
          <el-button type="primary" size="mini">布置作业</el-button>
          <el-button type="primary" size="mini">查看作业</el-button>
        </el-table-column> -->
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        large
        background
        :page-size="rows"
        layout="prev, pager, next"
        :total="total"
        :current-page="page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '是'
      }, {
        value: '选项2',
        label: '否'
      }],
      value: '', // 是否考过value
      input_email: '', // 邮箱搜索
      input_nickname: '', // 昵称搜索
      // 布置作业表格数据
      pubTableData: [],
      multipleSelection: [],
      pubFlag: false, // 布置作业题目的表格默认隐藏
      studentsList: [], // 学生列表
      // 分页数据
      lxTotal: 0,//已联系题数
      total: 0,//总题数
      page: 1,
      rows: 20,
      pages: 0, //总页数
      userIdsStr: '',
      tmIdsStr: ''
    }
  },
  created () {
    this.getStudentList()
  },
  mounted () {
    this.tmIdsStr = sessionStorage.getItem('tmIds')
  },
  methods: {
    //   布置作业
    pubWork () {
      if (!this.multipleSelection.length) {
        this.$msg.info('请挑选学生')
      } else {
        console.log(11);
        // if (this.userIdsStr != '' && this.userIdsStr != null) {
        //   console.log(1);
        //   sendPost(api.assignment, {
        //     userIds: this.userIdsStr, ids: this.tmIdsStr
        //   }).then(res => {
        //     console.log(res);
        //     this.$msg.success('作业布置成功!')
        //     //   this.$router.push('/')
        //     this.multipleSelection = ''
        //     sessionStorage.removeItem('uid')
        //   }).catch(err => {
        //     console.log(err);
        //   })
        // }
        // 先选题目后选学生
        if (this.tmIdsStr != '' && this.multipleSelection.length) {

          console.log(2);
          sendPost(api.assignment, {
            userIds: this.userIdsStr, ids: this.tmIdsStr
          }).then(res => {
            console.log(res);
            this.$msg.success('作业布置成功!')
            //   this.$router.push('/')
            sessionStorage.removeItem('uid')
            this.multipleSelection = ''

          }).catch(err => {
            console.log(err);
          })
        }
      }
    },
    // 获取学生列表
    getStudentList () {
      sendPost(api.getUserList, {
        page: 1,
        rows: 20
        // emial: "5555@qq.com",
        // nickanme: "123",
        // isKs: "1",
      }).then(res => {
        // console.log(res.data)
        this.studentsList = res.data.list
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
       const uIds = []
      val.forEach(item => {
       uIds.push(item.id)
      })
      this.userIdsStr = uIds.join()
    },
    // 当前页码发生改变时触发
    handleCurrentChange (value) {
      this.page = value
      this.getStudentList(this.page)
    },
    toggleSelection () { }
  },
}
</script>

<style lang="less" scoped>
main {
  width: 75rem;
  margin: 0 auto;
  /deep/.el-button--primary {
    background-color: #ff5342;
    border-color: #ff5342;
  }
  .search {
    margin-top: 30px;
    height: 4rem;
    line-height: 4rem;
    background-color: #fff;
    .el-select {
      width: 7.5rem;
      margin-right: 4rem;
    }
    .el-input {
      width: 15.3rem;
      margin-right: 3.3rem;
      border-radius: 50% !important;
    }
    .el-button {
      margin-right: 2rem;
      height: 2.5rem;
      border: none;
    }
    #pub_work {
      margin-left: 4.5rem;
      margin-right: 0;
    }
    /deep/.el-button--mini,
    .el-button--mini.is-round {
      padding: 7px 15px;
    }
  }
  a {
    font-family: Microsoft YaHei;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    height: 100%;
    &.router-link-exact-active {
      border-top: 2px solid #ff5342;
      color: #ff5342;
    }
  }

  // 分页器
  .el-pagination {
    text-align: center;
    margin-top: 6.25rem;
  }
}
</style>
